<script setup>
import {computed, onMounted, ref, watch} from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import useChat from '../composables/useChat'
import ChatMessage from '../components/ChatMessage.vue'

const router = useRouter()
const userStore = useUserStore()
const messagesContainer = ref(null)
const urla='http://10.162.1.134:5000/miss1?id='+userStore.id
const iframeUrl = computed(() => urla) //?id=${userStore.id}
const iframeLoading = ref(true)

const onIframeLoad = () => {
  iframeLoading.value = false
}
const {
  messages,
  currentMessage,
  isLoading,
  error,
  sendMessage,
  stopGeneration
} = useChat()

const handleLogout = () => {
  userStore.logout()
  router.push('/')
}

onMounted(() => {
  userStore.loadFromStorage()
  if (!userStore.token) {
    router.push('/')
  }
  scrollToBottom()
})

// Watch for new messages and scroll to bottom
watch(messages, () => {
  scrollToBottom()
}, { deep: true })

const scrollToBottom = () => {
  if (messagesContainer.value) {
    setTimeout(() => {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }, 0)
  }
}

</script>

<template>
  <div class="main-container">

  <div class="chat-container">
    <header class="chat-header">
      <div class="user-info">
        <span class="username">用户名：{{ userStore.username }}</span>
      </div>
      <button class="logout-btn" @click="handleLogout">退出</button>
    </header>

    <div class="messages" ref="messagesContainer">
      <ChatMessage
          v-for="message in messages"
          :key="message.id"
          :message="message.content"
          :isUser="message.isUser"
          :html="message.html"
      />
      <div v-if="isLoading" class="loading-indicator">
        <div class="typing-indicator">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <button
            class="stop-generation-btn"
            @click="stopGeneration"
            :disabled="!isLoading"
        >
          停止响应
        </button>
      </div>
    </div>

    <div class="input-area">
      <input
          type="text"
          v-model="currentMessage"
          @keyup.enter="sendMessage"
          placeholder="请在此处提问哦..."
          :disabled="isLoading"
      />
      <button @click="sendMessage" :disabled="isLoading || !currentMessage.trim()">
        {{ isLoading ? 'Processing...' : 'Send' }}
      </button>
    </div>
  </div>
    <div class="iframe-container">
      <div v-if="iframeLoading" class="iframe-loading">
        加载中...
      </div>
      <iframe
          :src="iframeUrl"
          width="104%"
          height="100%"

          @load="onIframeLoad"
      ></iframe>
    </div>

  </div>
</template>

<style scoped>
.main-container {
  display: flex;
  width:1400px;

  padding:0;
  justify-content:flex-start;
}
.iframe-container {
  flex: 1; /* 右侧iframe容器占剩余60%宽度 */
  height: 100vh;

  background-color: #eff;
  border-left: 0px solid #ddd;
  border-right:0px solid #ddd;
}

.iframe-loading {
  position: absolute;
  top: 0;
  left: 0;


  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.8);
  z-index: 10;
}
.chat-container {

  display: flex;
  flex: 0 0 0.6; /* 确保最小宽度 */
  width:700px;
  height: 100vh;
  justify-content:left;
  flex-direction: column;
  margin-left: 0;
  padding-left: 0;
  background-color: #fff;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #4CAF50;
  color: white;
  border-bottom: 1px solid #ddd;
}

.user-info .username {
  font-weight: bold;
}

.logout-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.logout-btn:hover {
  background-color: #d32f2f;
}

.messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loading-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.typing-indicator {
  display: flex;
  padding: 8px 16px;
  background-color: #f1f1f1;
  border-radius: 18px;
}

.typing-indicator span {
  height: 8px;
  width: 8px;
  margin: 0 2px;
  background-color: #999;
  border-radius: 50%;
  display: inline-block;
  animation: typing 1.4s infinite ease-in-out;
}

.stop-generation-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  margin-left: 8px;
}

.stop-generation-btn:hover {
  background-color: #766565;
}

.stop-generation-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
  }
}

.input-area {
  display: flex;
  padding: 12px;
  border-top: 1px solid #ddd;
}

.input-area input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin-right: 8px;
  font-size: 13px;
}

.input-area button {
  padding: 12px 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

.input-area button:hover {
  background-color: #45a049;
}

.input-area button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>